<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Admin index Examples</title>
  <meta name="description" content="这是一个 index 页面">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="assets/css/amazeui.css"/>
  <link rel="stylesheet" href="assets/css/admin.css">
  <link rel="stylesheet" href="assets/css/admin_custom.css" />	
</head>
<body>
	<style>
		.pd8 {
			padding: 0.7rem;
		}
		
		@media only screen and (min-width: 1330px) {
			.show1 {
				display: none;
			}
		}
		
		@media (min-width: 1330px) {
			.show1 {
				display: none;
			}
		}
		.am-nav-pills>li+li{
			margin-left: 0px !important;
		}
		.am-topbar, .am-topbar a{
			color: #ddd;
		}
		.am-nav>li>a:focus, .am-nav>li>a:hover{
			background-color: #4f627e;
		}
		.headerbg{
			border-color: #50627f !important;
		}
		body{font-size: 1.4em;}
		.admin-sidebar-list li a{
			padding-left: 15px;
		}
		.admin-sidebar{
			width: 245px;
		}
		.headermenu span{
			display: block;
			padding-bottom: 8px;
		}
	</style>	
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->


  <!-- sidebar start -->
  <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
  	
  	
    <div class="am-offcanvas-bar admin-offcanvas-bar">
      <ul class="am-list admin-sidebar-list">
      	
        <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li>
        
        <li class="admin-parent">
          <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file am-icon-fw"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
          <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
            <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check am-icon-fw"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
            <li><a href="admin-help.html"><span class="am-icon-puzzle-piece am-icon-fw"></span> 帮助页</a></li>
            <li><a href="admin-gallery.html"><span class="am-icon-th am-icon-fw"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
            <li><a href="admin-log.html"><span class="am-icon-calendar am-icon-fw"></span> 系统日志</a></li>
            <li><a href="admin-404.html"><span class="am-icon-bug am-icon-fw"></span> 404</a></li>
          </ul>
        </li>
        
        <li><a href="admin-table.html"><span class="am-icon-table am-icon-fw"></span> 表格</a></li>
        
        <li><a href="admin-form.html"><span class="am-icon-pencil-square-o am-icon-fw"></span> 表单</a></li>
        
        <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li>



						
						<!--用户管理(折叠菜单) S-->
						<li>
							<a class="am-cf" data-am-collapse="{target: '#users-nav'}"><span class="am-icon-user am-icon-fw"></span> 用户管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub" id="users-nav">
								<li><a href=""><span class="am-icon-user am-icon-fw"></span> 用户列表</a></li>
								<li><a href=""><span class="am-icon-group am-icon-fw"></span> 用户组</a></li>
								<li><a href=""><span class="am-icon-cog am-icon-fw"></span> 模块设置</a></li>
							</ul>
						</li>
						<!--E-->
						
						<!--微信管理(折叠菜单) S-->
						<!--<li>
							<a class="am-cf" data-am-collapse="{target: '#wechat-nav'}"><span class="am-icon-weixin am-icon-fw"></span> 微信管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub" id="wechat-nav">
								<li><a href=""><span class="am-icon-file-image-o am-icon-fw"></span> 图文素材</a></li>
								<li><a href=""><span class="am-icon-comment-o am-icon-fw"></span> 自动回复</a></li>
								<li><a href=""><span class="am-icon-comments-o am-icon-fw"></span> 类别管理</a></li>
								<li><a href=""><span class="am-icon-list am-icon-fw"></span> 自定义菜单</a></li>
							</ul>
						</li>-->
						<!--E-->
						
						<!--积分管理(折叠菜单) S-->
						<li>
							<a class="am-cf" data-am-collapse="{target: '#integral-nav'}"><span class="am-icon-gift am-icon-fw"></span> 积分管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub" id="integral-nav">
								<li><a href=""><span class="am-icon-heart am-icon-fw"></span>  积分明细</a></li>
								<li><a href=""><span class="am-icon-inbox am-icon-fw"></span> 积分商品</a></li>
								<li><a href=""><span class="am-icon-list am-icon-fw"></span> 积分订单</a></li>
								<li><a href=""><span class="am-icon-cog am-icon-fw"></span> 模块设置</a></li>
							</ul>
						</li>
						<!--E-->
						<!--单页管理(折叠菜单) S-->
						<li>
							<a class="am-cf" data-am-collapse="{target: '#page-nav'}"><span class="am-icon-tag am-icon-fw"></span> 单页管理 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub" id="page-nav">
								<li><a href=""><span class="am-icon-file am-icon-fw"></span> 单页列表</a></li>
								<li><a href=""><span class="am-icon-play-circle am-icon-fw"></span> 类别管理</a></li>
							</ul>
						</li>
						<!--E-->
						<!--系统设置(折叠菜单) S-->
						<li>
							<a class="am-cf" data-am-collapse="{target: '#system-nav'}"><span class="am-icon-wrench am-icon-fw"></span> 系统设置 <span class="am-icon-angle-right am-fr am-margin-right "></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub" id="system-nav">
								<li><a href=""><span class="am-icon-gears am-icon-fw"></span> 全局设置</a></li>
								<li><a href=""><span class="am-icon-gear am-icon-fw"></span> 权限设置</a></li>
								<li><a href=""><span class="am-icon-align-left am-icon-fw"></span> 菜单管理</a></li>
								<li><a href=""><span class="am-icon-arrows-alt am-icon-fw"></span> 模块管理</a></li>
								<li><a href=""><span class="am-icon-credit-card am-icon-fw"></span> 支付方式</a></li>
								<li><a href=""><span class="am-icon-truck am-icon-fw"></span> 快递公司</a></li>
								<li><a href=""><span class="am-icon-home am-icon-fw"></span> 配色地区</a></li>
								<li><a href=""><span class="am-icon-expand am-icon-fw"></span> 运单模板</a></li>
								<li><a href=""><span class="am-icon-info am-icon-fw"></span> 消息通知</a></li>
							</ul>
						</li>
						<!--E-->

     
      </ul>

      <div class="am-panel am-panel-default admin-sidebar-panel">
        <div class="am-panel-bd">
          <p><span class="am-icon-bookmark"></span> 公告</p>
          <p>时光静好，与君语；细水流年，与君同。—— Amaze UI</p>
        </div>
      </div>

      <div class="am-panel am-panel-default admin-sidebar-panel">
        <div class="am-panel-bd">
          <p><span class="am-icon-tag"></span> wiki</p>
          <p>Welcome to the Amaze UI wiki!</p>
        </div>
      </div>
    </div>
    
    
    
  </div>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">

		<div class="pageheader notab">
            <h1 class="pagetitle">首页</h1>
            <span class="pagedesc">This is a sample description of a page</span>
        </div>
	<div class="am-margin-bottom"></div>
    <ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
      <li><a href="#" class="am-text-success"><span class="am-icon-btn am-icon-file-text"></span><br/>新增页面<br/>2300</a></li>
      <li><a href="#" class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>成交订单<br/>308</a></li>
      <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>昨日访问<br/>80082</a></li>
      <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>在线用户<br/>3000</a></li>
    </ul>



    <div class="am-g">
      <div class="am-u-md-6">
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-1'}">文件上传<span class="am-icon-chevron-down am-fr" ></span></div>
          <div class="am-panel-bd am-collapse am-in" id="collapse-panel-1">
<button type="button" class="am-btn am-btn-default">默认样式</button>
<button type="button" class="am-btn am-btn-primary">主色按钮</button>
<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning" style="background: #ffe9ad;border: 1px solid #eac572;border-radius: 2px;color: #999;">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger" style="background: #e18b7c;border: 1px solid #e18b7c;border-radius: 2px;">红色按钮</button>
<a class="am-btn am-btn-link">链接</a>

          </div>
        </div>
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-2'}">浏览器统计<span class="am-icon-chevron-down am-fr" ></span></div>
          <div id="collapse-panel-2" class="am-in">
            <table class="am-table am-table-bd am-table-bdrs am-table-striped am-table-hover">
              <tbody>
              <tr>
                <th class="am-text-center">#</th>
                <th>浏览器</th>
                <th>访问量</th>
              </tr>
              <tr>
                <td class="am-text-center"><img src="assets/i/examples/admin-chrome.png" alt=""></td>
                <td>Google Chrome</td>
                <td>3,005</td>
              </tr>
              <tr>
                <td class="am-text-center"><img src="assets/i/examples/admin-firefox.png" alt=""></td>
                <td>Mozilla Firefox</td>
                <td>2,505</td>
              </tr>
              <tr>
                <td class="am-text-center"><img src="assets/i/examples/admin-ie.png" alt=""></td>
                <td>Internet Explorer</td>
                <td>1,405</td>
              </tr>
              <tr>
                <td class="am-text-center"><img src="assets/i/examples/admin-opera.png" alt=""></td>
                <td>Opera</td>
                <td>4,005</td>
              </tr>
              <tr>
                <td class="am-text-center"><img src="assets/i/examples/admin-safari.png" alt=""></td>
                <td>Safari</td>
                <td>505</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="am-u-md-6">
        <div class="am-panel am-panel-default">
          <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-4'}">任务 task<span class="am-icon-chevron-down am-fr" ></span></div>
          <div id="collapse-panel-4" class="am-panel-bd am-collapse am-in">
            <ul class="am-list admin-content-task">
              <li>
                <div class="admin-task-meta"> Posted on 25/1/2120 by John Clark</div>
                <div class="admin-task-bd">
                  The starting place for exploring business management; helping new managers get started and experienced managers get better.
                </div>
                <div class="am-cf">
                  <div class="am-btn-toolbar am-fl">
                    <div class="am-btn-group am-btn-group-xs">
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-check"></span></button>
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-pencil"></span></button>
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
                    </div>
                  </div>
                  <div class="am-fr">
                    <button type="button" class="am-btn am-btn-default am-btn-xs">删除</button>
                  </div>
                </div>
              </li>
              <li>
                <div class="admin-task-meta"> Posted on 25/1/2120 by 呵呵呵</div>
                <div class="admin-task-bd">
                  基兰和狗熊出现在不同阵营时。基兰会获得BUFF，“装甲熊憎恨者”。狗熊会获得BUFF，“时光老人憎恨者”。
                </div>
                <div class="am-cf">
                  <div class="am-btn-toolbar am-fl">
                    <div class="am-btn-group am-btn-group-xs">
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-check"></span></button>
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-pencil"></span></button>
                      <button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
                    </div>
                  </div>
                  <div class="am-fr">
                    <button type="button" class="am-btn am-btn-default am-btn-xs">删除</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="am-panel am-panel-default">
          <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-3'}">最近留言<span class="am-icon-chevron-down am-fr" ></span></div>
          <div class="am-panel-bd am-collapse am-in am-cf" id="collapse-panel-3">

            <ul class="am-pagination am-fr admin-content-pagination">
              <li class="am-disabled"><a href="#">&laquo;</a></li>
              <li class="am-active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">&raquo;</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- content end -->

</div>



<footer>
  <hr>
  <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
		<script language="JavaScript">
			$(function() {
				$(window).resize(function() {
					//					alert($(window).width()); //浏览器时下窗口可视区域宽度
					width1 = '1330';
					var width1 = width1 -= 60;
					console.log(width1);
					if (($(window).width()) < 1330) {
						$(".ceshi>li:eq(8)").hide();
					} else {
						$(".ceshi>li:eq(8)").show();
					}
					if (($(window).width()) < 1270) {
						$(".ceshi>li:eq(7)").hide();
					} else {
						$(".ceshi>li:eq(7)").show();
					}
					if (($(window).width()) < 1170) {
						$(".ceshi>li:eq(6)").hide();
					} else {
						$(".ceshi>li:eq(6)").show();
					}
					if (($(window).width()) < 1070) {
						$(".ceshi>li:eq(5)").hide();
					} else {
						$(".ceshi>li:eq(5)").show();
					}
					if (($(window).width()) < 970) {
						$(".ceshi>li:eq(4)").hide();
					} else {
						$(".ceshi>li:eq(4)").show();
					}
					if (($(window).width()) < 900) {
						$(".ceshi>li:eq(3)").hide();
					} else {
						$(".ceshi>li:eq(3)").show();
					}
					if (($(window).width()) < 800) {
						$(".ceshi>li:eq(2)").hide();
					} else {
						$(".ceshi>li:eq(2)").show();
					}
					if (($(window).width()) < 720) {
						$(".ceshi>li:eq(1)").hide();
					} else {
						$(".ceshi>li:eq(1)").show();
					}
					if (($(window).width()) < 620) {
						$(".ceshi>li:eq(0)").hide();
					} else {
						$(".ceshi>li:eq(0)").show();
					}
				})
			})
			var a = []
			var b=[]
			for (widthQ = 1330, numQ = 8; widthQ > '500', numQ >= 0; widthQ -= '60', numQ--) {
				a.push(widthQ)
				b.push(numQ)
			}
			console.log(a);
			console.log(b)
			a.forEach(function(value) {
				if (($(window).width()) < value) {
					$(".ceshi>li:eq(8)").hide();
				} else {
					$(".ceshi>li:eq(8)").show();
				}
				if (($(window).width()) < value) {
					$(".ceshi>li:eq(7)").hide();
				} else {
					$(".ceshi>li:eq(7)").show();
				}				
//				console.log(value)
			})
		</script>
</body>
</html>
